<template>
  <div id="bj">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="center">
      <h1 class="tie">爱宠邦·后台管理系统</h1>
      <label>
        <el-form-item prop="loginName">
          <img src="@/assets/zhanghao.png" class="img">
          <el-input placeholder="请输入登陆名" v-model="ruleForm.loginName" class="kk"></el-input>
        </el-form-item>
      </label>
      <label style="margin-top: 25px;">
        <el-form-item prop="pwd">
          <img src="@/assets/lock.png" class="img">
          <el-input placeholder="请输入密码" v-model="ruleForm.pwd" show-password class="kk"></el-input>
        </el-form-item>
      </label>
      <div style="margin-top: 10px;">
        <el-button type="primary" @click="login('ruleForm')" style="width: 200px;">登录</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        loginName: "",
        pwd: ""
      },
      rules: {
        loginName: [
          {
            required: true,
            message: "登陆名不能为空！"
          }
        ],
        pwd: [{ required: true, message: "密码不能为空！" }]
      }
    };
  },
  computed: {
    loginUser() {
      return this.$store.state.permission.loginUser;
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          await this.$store.dispatch("permission/login", this.ruleForm);
          if (this.loginUser) {
            if (this.loginUser.state === "已通过") {
              this.$message({
                message: "登陆成功！",
                type: "success",
                onClose: () => {
                  this.$router.push({
                    name: this.loginUser.role
                  });
                }
              });
            } else {
              this.$message.error("该账号已被冻结！");
              this.ruleForm.pwd = "";
            }
          } else {
            this.$message.error("登陆名或密码错误！");
            this.ruleForm.pwd = "";
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.kk {
  width: 390px;
}
#bj {
  width: 100%;
  height: 100%;
  background: url("../assets/login.jpg");
  display: flex;
  align-items: center;
  justify-content: center;
}
.tie {
  width: 100%;
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 60px;
  margin-top: -40px;
}
.img {
  color: wheat;
  margin-top: 5px;
  float: left;
  margin-right: 15px;
}
.center {
  width: 560px;
  height: 350px;
  display: flex;
  border-radius: 3px;
  outline: 1px solid white;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>


